<template>
  <van-cell title="选择日期区间" @click="show = true">
    <template #value>
      <span class="">{{ start }}</span>
      <span class="ml-4">{{ end }}</span>
    </template>
  </van-cell>

  <van-calendar
    :min-date="minDate"
    :max-date="maxDate"
    :allow-same-day="true"
    v-model:show="show"
    type="range"
    @confirm="onConfirm"
  />
</template>

<script>
export default {
  emits: ['on-date'],
  data() {
    return {
      start: '',
      end: '',
      show: false,
      minDate: new Date(2021, 6, 1),
      maxDate: new Date(),
    }
  },
  methods: {
    onConfirm(values) {
      const [start, end] = values
      this.show = false
      this.start = this.$ymd(start)
      this.end = this.$ymd(end)
      this.$emit('on-date', { start: this.start, end: this.end })
    },
  },
}
</script>

<style></style>
